<link rel="stylesheet" href="../core/resource/components/swiper/swiper.min.css?v=3">
<style>
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:0.1rem}
.swiper-pagination-bullet {
    width: 0.2rem;
    height: 0.2rem;
    display: inline-block;
    border-radius: 0.2rem;
    background: #999;
    opacity: .2;
}
.swiper-pagination-bullet-active{background:#fff;width:0.6rem;opacity: 1;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0.05rem;
}
</style>
<div class="swiper-container" style="position: absolute; top:0;bottom:2.7rem;width:100%">
    <div class="swiper-wrapper" style="padding-bottom:0.5rem;height:100%">
      <div class="swiper-slide" ng-repeat="item in pagedata.pageset.hdps" ng-click="access_json(item.url)">
		<img ng-if="item.type!=1" ng-src="{{tomedia(item.picurl) || '../core/resource/images/nopic.jpg'}}" style="display: block; width: 100%; height: 100%;object-fit:cover;">
		<video ng-if="item.type==1" id="video{{$index}}" style="width:100%;height:100%;object-fit:cover;" ng-src="{{tomedia(item.video)}}" poster="{{tomedia(item.thumb)}}" x5-playsinline="" playsinline="" webkit-playsinline="" preload="auto"  preload="auto" controls loop="loop">
		</video>
	  </div>
	</div>
	<div class="swiper-pagination"></div>
</div>
<div style="height:{{pagedata.pageheight}}px;"></div>
<div ng-if="pagedata.pageheight>0" style="margin-top:-2.7rem"></div>
 <script>
scope.pagedata.pageheight=window.innerHeight;
scope.pagedata.swiper=function(isto){
	require(['swiper'], function (Swiper) {
			var swiper = new Swiper('.swiper-container', {
				pagination: {
					el: '.swiper-pagination',
				},
				on: {
					 transitionEnd:function(){
						if(scope.pagedata.nowkey!=this.activeIndex || isto){
							if(scope.pagedata.isslideTo){
								scope.pagedata.nowkey=this.activeIndex;
								scope.pagedata.nowhdp=scope.pagedata.pageset.hdps[scope.pagedata.nowkey];
								console.log(scope.pagedata.nowkey);
							}
							var title = scope.pagedata.pageset['title'+scope.pagedata.nowhdp.key]; 
							console.log(title);
							if(title){
								$(document).attr('title',title);
							}
							var hdps=scope.pagedata.pageset.hdps
							if(hdps && hdps.length){
								for(var i=0;i<hdps.length;i++){
									if(hdps[i].type==1){
										var video = document.getElementById('video'+i);
										video.pause();
									}
								}
							}
							if(scope.pagedata.nowhdp.type==1){
								var video = document.getElementById('video'+scope.pagedata.nowkey);
								video.play();
							}
							scope.$evalAsync();
						}
					 },
				},
			});
			if(!scope.pagedata.isslideTo){
				scope.pagedata.isslideTo=1;
				swiper.slideTo(scope.pagedata.nowkey); 
			}
	});
}
scope.pagedata.swiper();
setTimeout(function(){
	if(scope.pagedata.nowhdp && scope.pagedata.nowhdp.type==1){
		var video = document.getElementById('video0');
		video.play();
	}
},1000);
scope.pagedata.slideTo=function(key){
	scope.pagedata.nowkey=key;
	scope.pagedata.nowhdp=scope.pagedata.pageset.hdps[scope.pagedata.nowkey];
	scope.pagedata.isslideTo='';
	if(key==0){
		var title = scope.pagedata.pageset['title'+scope.pagedata.nowhdp.key]; 
		console.log(title);
		if(title){
			$(document).attr('title',title);
		}
	}
	scope.pagedata.swiper(true);
	scope.$evalAsync();
}
</script>